<template>
  <div class="clientCompanyChoose">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-form ref="companyData" :model="companyData" :rules="rules" label-width="100px">
        <el-form-item label="公司名称：" prop="companyName">
          <el-input
            v-model="companyData.companyName"
            maxlength="100"
            show-word-limit
            class="show-word-limit-52"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="公司网址：">
          <el-input
            v-model="companyData.webUrl"
            maxlength="80"
            show-word-limit
            class="show-word-limit"
            placeholder="请输入公司网址"
          >
            <template slot="prepend">Http://</template>
          </el-input>
        </el-form-item>
        <el-form-item label="邮政编码：">
          <el-input v-model="companyData.post" maxlength="6" show-word-limit placeholder="请输入邮政编码" />
        </el-form-item>
        <el-form-item label="地区：">
          <el-cascader
            v-model="companyData.area"
            :options="areaData"
            :props="props"
            separator="/"
            :class="[areaPlaceholder === '请选择' ? '' : 'cascaderHave']"
            :placeholder="areaPlaceholder"
          />
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input
            v-model="companyData.fullAddress"
            maxlength="210"
            show-word-limit
            type="textarea"
            :rows="2"
            class="show-word-limit"
            :autosize="{ minRows: 2 }"
            placeholder="请输入详细地址"
          />
        </el-form-item>
        <el-form-item label="公司简介：">
          <el-input
            v-model="companyData.introduce"
            maxlength="255"
            show-word-limit
            type="textarea"
            :rows="2"
            class="show-word-limit"
            :autosize="{ minRows: 2 }"
            placeholder="请输入公司简介"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getArea } from '@/api/system-management'
export default {
  name: 'ClientCompanyChoose',
  data() {
    return {
      dialogVisible: false,
      title: '客户',
      companyData: {
        companyId: null,
        companyName: '',
        webUrl: '',
        post: '',
        area: [],
        fullAddress: '',
        introduce: ''
      },
      areaPlaceholder: '请选择',
      areaData: [],
      props: {
        label: 'label',
        value: 'value',
        children: 'cities',
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node
          getArea({ areaId: node.value }).then((res) => {
            res.data.forEach((el) => {
              el.leaf = level >= 2
            })
            resolve(res.data)
          })
        }
      },
      rules: {
        companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }]
      },
      type: ''
    }
  },
  mounted() {
    getArea({ areaId: null }).then((res) => {
      this.areaData = res.data
    })
  },
  methods: {
    is(type, data) {
      this.dialogVisible = true
      this.type = type
      if (type === 'edit') {
        this.title = '修改客户公司'
        this.companyData.companyId = data.companyId
        this.companyData.companyName = data.companyName
        this.companyData.webUrl = data.webUrl
        this.companyData.post = data.post
        this.companyData.fullAddress = data.fullAddress
        this.companyData.introduce = data.introduce
        if (data.province !== '' && data.province !== null) {
          this.areaPlaceholder = data.province + '/' + data.city + '/' + data.country
        }
      } else {
        this.title = '新增客户'
      }
    },
    close() {
      this.$emit('closeCompanyDialog')
      this.dialogVisible = false
      this.companyData.companyName = null
      this.companyData.webUrl = null
      this.companyData.post = null
      this.companyData.fullAddress = null
      this.companyData.introduce = null
      this.companyData.area = []
      this.areaPlaceholder = '请选择'
      this.areaData = []
    },
    setData() {},
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          this.close()
        })
        .catch((_) => {})
    },
    getArea(areaId) {
      getArea({ areaId: areaId }).then((res) => {})
    },
    submitForm() {
      this.$refs['companyData'].validate((valid) => {
        if (valid) {
          const obj = JSON.parse(JSON.stringify(this.companyData))
          obj['provinceId'] = this.companyData.area[0]
          obj['cityId'] = this.companyData.area[1]
          obj['countryId'] = this.companyData.area[2]
          this.$emit('companySubmit', obj, this.type)
          this.close()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.clientCompanyChoose {
  /deep/.el-dialog__body {
    padding: 30px 60px;
  }
  /deep/label {
    font-weight: 500;
  }
  .cascaderHave {
    /deep/ .el-input__inner::placeholder {
      color: #606266;
    }
  }
}
</style>
